<template>
  <div class="sheet-wrapper" ref="sheet" :class="{ fixed: headerFixed }">
    <div class="sheet-body">
      <div class="card-top">
        <div class="title">答题卡</div>
        <div class="number">
          <el-checkbox v-model="checked" @change="handleChange">只看错题</el-checkbox>
        </div>
      </div>
      <div class="card-conter">
        <el-scrollbar>
          <div class="topic-wrapper">
            <div class="topic-status">
              <span class="gray">注：</span>
              <span class="btn correct"></span>
              <span class="text">正确</span>
              <span class="btn error"></span>
              <span class="text">错误</span>
              <span class="btn default"></span>
              <span class="text">未答</span>
              <span class="btn ban"></span>
              <span class="text">主观题</span>
            </div>
            <div class="topic-view" v-for="(row, j) in testParts" :key="j">
              <div class="title">{{ row.title }}</div>
              <div class="list">
                <div class="col" v-for="(item, i) in row.value" :key="i">
                  <div
                    class="item"
                    :class="classStatus(item.answered, item.answer_right, item.subjective)"
                    @click="handleItem(addNum(j) + (i + 1))"
                  >
                    {{ addNum(j) + (i + 1) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
/** 累加器 **/
const sum = (...arr) => [].concat(...arr).reduce((acc, val) => acc + val, 0)
export default {
  data() {
    return {
      offsetTop: 0,
      headerFixed: false,
      checked: false
    }
  },
  props: {
    testParts: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  mounted() {
    if (this.$route.query.status == 1) {
      this.checked = false
    } else {
      this.checked = true
    }
    this.$nextTick(() => {
      // 获取吸顶元素的dom
      // let sheet = this.$refs.sheet
      // 吸顶元素到top的距离
      // this.offsetTop = sheet.offsetTop
      // 监听滚动条
      this.offsetTop = this.$refs.sheet.getBoundingClientRect().top
      window.addEventListener('scroll', this.handleScroll)
    })
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll, false)
  },
  methods: {
    // 计算答题卡试题编号
    addNum(i) {
      let numArr = this.testParts.map(item => item.value.length)
      let newArr = numArr.slice(0, i)
      return sum(newArr)
    },
    classStatus(answered, answer_right, subjective) {
      // correct正确 error错误 default未答 ban主观题
      if (subjective == 1) return 'ban'
      if (answered == 1) return answer_right == 1 ? 'correct' : 'error'
      return 'default'
    },
    handleScroll() {
      // 得到页面滚动的距离，兼容写法
      let scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 判断页面滚动的距离是否大于吸顶元素的位置
      this.headerFixed = scrollTop > this.offsetTop ? true : false
    },
    handleChange(val) {
      this.$emit('change', val)
    },
    handleItem(index) {
      this.$emit('click', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.sheet-wrapper {
  padding: 15px 10px;
  width: 300px;
  background-color: #ffffff;
  box-sizing: border-box;
  &.fixed {
    position: fixed;
    top: 0;
    z-index: 100;
  }
  .sheet-body {
    border-radius: 6px;
    border: 1px solid $border-color-wireframe;
    .card-top {
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      background: #f7f7f7;
      border-radius: 6px 6px 0px 0px;
      .title {
        font-size: 16px;
        font-weight: 400;
        color: $text-color-import;
      }
      .number {
        font-size: 15px;
        font-weight: 400;
        color: $text-color-import;
        span {
          @include edu-color-auxiliary;
        }
      }
    }
    .card-conter {
      height: 296px;
      .el-scrollbar {
        height: 100%;
        ::v-deep .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
      .topic-wrapper {
        padding: 15px 20px;
      }
      .topic-status {
        display: flex;
        align-items: center;
        justify-content: center;
        .btn {
          margin-left: 5px;
          width: 16px;
          height: 16px;
          border-radius: 4px;
          box-sizing: border-box;
          &.correct {
            background-color: $text-color-free;
          }
          &.error {
            background-color: $text-color-error;
          }
          &.default {
            border: 1px solid #b7bac1;
          }
          &.ban {
            background-color: #ededed;
            border: 1px solid #b7bac1;
          }
        }
        .gray {
          font-size: 12px;
          font-weight: 400;
          color: $text-color-auxiliary;
        }
        .text {
          margin-left: 4px;
          font-size: 12px;
          font-weight: 400;
          color: $text-color-import;
        }
      }
      .topic-view {
        margin-top: 26px;
        .title {
          font-size: 14px;
          font-weight: 400;
          color: $text-color-import;
        }
        .list {
          display: flex;
          flex-wrap: wrap;
          margin-left: -7px;
          margin-right: -7px;
          .col {
            margin-top: 14px;
            padding: 0 7px;
          }
          .item {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 400;
            border-radius: 4px;
            cursor: pointer;
            box-sizing: border-box;
            &.correct {
              color: #ffffff;
              background-color: $text-color-free;
            }
            &.error {
              color: #ffffff;
              background-color: $text-color-error;
            }
            &.default {
              color: $text-color-import;
              border: 1px solid #b7bac1;
            }
            &.ban {
              color: $text-color-auxiliary;
              background-color: #ededed;
              border: 1px solid #b7bac1;
            }
          }
        }
      }
    }
  }
}
</style>
